// ajax请求参数   params: 参数
let params = {
  pagenum: 1,// 获取第一页的数据
  pagesize: 3// 每页三条数据
}

// ------------------------获取用户信息-----------------------------
// 封装函数
function renderUser() {
  $.ajax({
    type: 'GET',
    url: '/admin/users',
    data: params,
    success: function (res) {
      let { status, total } = res;
      if (status === 0) {
        // console.log(res);
        let str = ``;
        res.data.forEach((item) => {
          str += `
        <tr>
          <td>${item.id}</td>
          <td>${item.username}</td>
          <td>${item.nickname}</td>
          <td>${item.email}</td>
          <td>
            <button data-id=${item.id} data-username="${item.username}" data-nickname="${item.nickname}" data-email="${item.email}" class="edit layui-btn layui-btn-xs">编辑</button>
            <button data-id=${item.id} class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
            <button data-id=${item.id} class="reset layui-btn layui-btn-xs layui-btn-normal">重置密码</button>
          </td>
      </tr>`
        })
        $('tbody').html(str);
        showPage(total);
      }
    }
  })
};
renderUser();



// ------------------------分页功能-----------------------------
// 实现分页，就是修改请求参数（pagenum和pagesize），然后重新发送ajax请求，重新渲染页面。
// 创建了一个空的 div(需要有id)  然后用 layui 提供的分页模块 -- 先加载模块
let laypage = layui.laypage;
function showPage(total) {
  // 执行一个laypage实例
  laypage.render({
    elem: 'page', // 注意，这里的 page 是 ID，不用加 # 号
    count: total, // 数据总数，从服务端得到
    limit: params.pagesize,
    // 每页显示的条数，laypage 将会借助 count 和 limit 计算出分页数。
    curr: params.pagenum,  // 当前页
    // prev: '上一篇',  // 改变上一页的文字说明，这里不用改
    limits: [3, 10, 30, 40, 100],  // 改变下拉框可选择每页显示的条数
    layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'],  // 自定义排版。
    //       每页显示条数  上一页  中间的页数 下一页  数据总数  跳转到某页 
    // jump - 切换分页的回调
    jump: function (obj, first) {
      // 首次不执行的函数写在这里
      if (!first) {
        //do something
        // obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); // 得到每页显示的条数

        // 修改请求参数（pagenum和pagesize），然后重新发送ajax请求，重新渲染页面。
        params.pagenum = obj.curr;
        params.pagesize = obj.limit;
        renderUser();
      }
    }

  });
};

// ------------------------删除用户信息-----------------------------
$('tbody').on('click', '.del', function () {
  let id = $(this).data('id');
  layer.confirm('确认要删除用户吗？', function (index) {
    $.ajax({
      type: 'DELETE',
      url: '/admin/users/' + id,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message)
          renderUser();
        }
      }
    })
  })
});

// ------------------------编辑用户信息-----------------------------
$('tbody').on('click', '.edit', function () {
  let shuju = $(this).data();
  tanceng2 = layer.open({
    type: 1,
    title: '编辑用户',
    content: $('#tpl-edit').html(),
    area: ['500px', '300px'],
    success: function () {
      // 这里用layui提供的数据回填方法  layui - 表单 - 表单赋值/取值
      // form.val('表单的 lay-filter 属性值','数据，必须是对象格式，对象的键必须等于输入框的name值');
      let form = layui.form;
      form.val('edit', shuju);
    }
  })
});
$('body').on('submit', '.fmedit', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  // console.log(data);
  $.ajax({
    type: 'PUT',
    url: '/admin/users',
    data,
    success: function (res) {
      let { status, message } = res;
      if (status === 0) {
        layer.msg(message);
        // 关闭弹层
        layer.close(tanceng2);
        renderUser();
      }
      layer.msg(message);
    }
  })
})


// ------------------------重置用户密码-----------------------------
$('tbody').on('click', '.reset', function () {
  let id = $(this).data('id');
  // console.log(id);
  tanceng1 = layer.open({
    type: 1,
    title: '重置密码',
    content: $('#tpl-reset').html(),
    area: ['500px', '250px'],
    success: function () {
      // 数据回填
      $('input[name="id"]').val(id);
    }
  })
});

$('body').on('submit', '.fmreset', function (e) {
  e.preventDefault();
  // console.log($(this).serializeArray());;
  let id = $(this).serializeArray()[2].value;
  let password = $(this).serializeArray()[0].value;
  // console.log(id, password);
  $.ajax({
    type: 'PUT',
    url: `/admin/users/${id}`,
    data: { password },
    success: function (res) {
      // console.log(res);
      let { status, message } = res;
      if (status === 0) {
        layer.msg(message);
        // 关闭弹层
        layer.close(tanceng1)
      }
      layer.msg(message);
    }
  })
});

// ----------------表单验证-------------------------
// 自定义验证规则
// 使用 layui 的内置模块,使用之前，必须先加载模块 (弹出层不用加载，layui.js中已经定义了)
// 加载语法  let xxx =layui.模块名;
let form = layui.form;
// console.log(form); // verify:验证
form.verify({
  // 语法格式   键(验证规则) : 值(怎样验证)
  // len: ['正则表达式', '验证不通过时的提示'],
  len: [/^\S{6,12}$/, '密码长度为6~12位，且不能有空格'],
  // {6,12} 注意:不能加空格 不是{6, 12}
  // ^$一起用表示匹配整个字符串  \S表示非空白  

  // 函数形式，函数的形参表示，使用该验证规则的输入框的值。
  // 案例中，确认密码使用了这个验证规则，形参val表示我们输入的确认密码
  // same: function (val) { return '验证不通过时的值' }
  same: function (val) {
    // 获取密码
    let pwd = $('.pwd').val();
    // console.log(pwd, typeof pwd)
    // console.log(val, typeof val)
    // 判断
    if (pwd !== val) return '两次输入的密码不一致！';
  }
});



